---
title: Tailwind CSS Typography - Material Tailwind
description: Customise your web projects with our easy-to-use Typography component for Tailwind CSS using Material Design guidelines.
navigation:
  [
    "default-paragraph",
    "headings",
    "lead-text",
    "paragraph",
    "small-text",
    "typography-colors",
    "typography-gradient-color",
    "more-examples",
  ]
github: typography
prev: tooltip
next: footer
---

# Tailwind CSS Typography

Create website or app projects easier with our amazing typography component!

Our typography component includes elements like headings, paragraphs, text, and colors that you want to display on a webpage. They communicate the organization of the content and guide the users on the page.

Check out below our examples of typography elements styled with Tailwind CSS.

<br />

## Typography Examples:

<span id="default-paragraph"></span>
## Default Paragraph

Use this simple paragraph example for any type of web page.

<CodePreview
  id="typography"
  link="typography#typography"
  className="mt-2"
  component={<HTMLTypographyExamples.TypographyDefault/>}
>
```html
<p class="font-normal leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
  The time is now for it to be okay to be great. For being a bright color.
  For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

---

## Headings

Organize and structure text to improve readability and accessibility with Material Tailwind's headings. 

<CodePreview
  id="headings"
  link="typography#typography-variants"
  className="mt-4"
  component={<HTMLTypographyExamples.TypographyVariants/>}
>
```html
<h1
  class="font-bold leading-snug tracking-tight text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-5xl"
>
  H1 Get ready to experience a new level of performance and functionality.
</h1>

<h1
  class="font-light leading-snug tracking-tight text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-5xl"
>
  H1 Get ready to experience a new level of performance and functionality.
</h1>

<h2
  class="font-bold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-4xl"
>
  H2 Get ready to experience a new level of performance and functionality.
</h2>

<h2
  class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-2xl lg:max-w-3xl lg:text-4xl"
>
  H2 Get ready to experience a new level of performance and functionality.
</h2>

<h3
  class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-xl max-w-lg lg:max-w-2xl lg:text-3xl"
>
  H3 Get ready to experience a new level of performance and functionality.
</h3>

<h3
  class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-xl max-w-lg lg:max-w-2xl lg:text-3xl"
>
  H3 Get ready to experience a new level of performance and functionality.
</h3>

<h4
  class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-lg max-w-md lg:max-w-xl lg:text-2xl"
>
  H4 Get ready to experience a new level of performance and functionality.
</h4>

<h4
  class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-lg max-w-md lg:max-w-xl lg:text-2xl"
>
  H4 Get ready to experience a new level of performance and functionality.
</h4>

<h5
  class="font-semibold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-base max-w-sm lg:max-w-lg lg:text-xl"
>
  H5 Get ready to experience a new level of performance and functionality.
</h5>

<h5
  class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-base max-w-sm lg:max-w-lg lg:text-xl"
>
  H5 Get ready to experience a new level of performance and functionality.
</h5>

<h6
  class="font-bold leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-sm max-w-xs lg:max-w-md lg:text-lg"
>
  H6 Get ready to experience a new level of performance and functionality.
</h6>

<h6
  class="font-light leading-snug tracking-normal text-slate-800 mx-auto my-6 w-full text-sm max-w-xs lg:max-w-md lg:text-lg"
>
  H6 Get ready to experience a new level of performance and functionality.
</h6>
```
</CodePreview>

---

## Lead Text

Highlight the key message or value proposition of a page or section with our lead text example.

<CodePreview
  id="lead-text"
  link="typography#typography-variants"
  className="mt-4"
  component={<HTMLTypographyExamples.TypographyLoadText/>}
>
```html
<p class="font-normal leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
  The time is now for it to be okay to be great. For being a bright color.
  For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

---

## Paragraph

See below how you can implement a paragraph with Material Tailwind.

<CodePreview
  id="paragraph"
  link="typography#typography-variants"
  className="mt-4"
  component={<HTMLTypographyExamples.TypographyParagraph/>}
>
```html
<p className="font-light leading-relaxed mx-auto text-slate-500 lg:text-lg text-base max-w-3xl">
  The time is now for it to be okay to be great. For being a bright color.
  For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

---

## Small Text

Use this example of small text for disclaimers, footnotes, labels, and as secondary information.

<CodePreview
  id="small-text"
  link="typography#typography-variants"
  className="mt-4"
  component={<HTMLTypographyExamples.TypographySmallText/>}
>
```html
<p className="font-light leading-relaxed mx-auto text-slate-500 text-sm max-w-3xl">
  The time is now for it to be okay to be great. For being a bright color.
  For standing out. Get ready to experience a new level of performance and functionality.
</p>
```
</CodePreview>

---

## Typography Colors

Implement different colors for your typography depending on the message you want to transmit.

<CodePreview
  id="typography-colors"
  link="typography#typography-colors"
  className="mt-4"
  component={<HTMLTypographyExamples.TypographyColors/>}
>
```html
<h1 class="font-bold leading-snug tracking-tight text-slate-800 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
  Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-blue-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
  Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-red-600 mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
  Material Tailwind
</h1>
<h1 class="font-bold leading-snug tracking-tight text-green-600 mx-auto  w-full text-2xl lg:max-w-3xl lg:text-5xl">
  Material Tailwind
</h1>
```
</CodePreview>

---

## Typography Gradient Color

You can implement gradient colors for your typography. See below how you can do this with Material Tailwind.

<CodePreview
  id="typography-gradient-color"
  link="typography#typography-gradient-color"
  className="mt-4"
  component={<HTMLTypographyExamples.TypographyGradientColor/>}
>
```html
<h1 class="font-bold leading-snug tracking-tight bg-gradient-to-tr from-slate-800 to-slate-500 bg-clip-text text-transparent mx-auto w-full text-2xl lg:max-w-3xl lg:text-5xl">
  Material Tailwind
</h1>
```
</CodePreview>

---
<span id="more-examples"></span>
## Explore More Tailwind CSS Examples
Check out more typography examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>:

• <a href="https://www.material-tailwind.com/blocks/hero-sections" target="_blank">Hero Blocks</a><br />
• <a href="https://www.material-tailwind.com/blocks/feature-sections" target="_blank">Feature Blocks</a><br />
• <a href="https://www.material-tailwind.com/blocks/content-sections" target="_blank">Content Blocks</a><br />
• <a href="https://www.material-tailwind.com/blocks/blog-sections" target="_blank">Blog Templates</a><br />

